<template>
  <!-- 最大盒子 -->
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'职位详情'" :autoBack="true"
   leftIconColor="$uni-text-color" :bgColor="'#ffffff'" :titleStyle="{  color:'$uni-text-color',fontSize:'32rpx',fontWeight:'600' }" :onShareAppMessage="shareInfo">
    <!-- height: 'calc(100vh - ' + (safeAreaInsets?.top + 120) + 'px)' -->
    <view class="area max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px'}" v-if="listdetailsData">
      <scroll-view scroll-y class="scroll_box">
        <!-- 第一块 薪资信息 -->
        <view class="one_box">
          <!-- 岗位 -->
          <view class="one_top_box">
            <view class="recruit_image">
              <image :src="`${baseUrl}/uploads/uniapp_image/user/Direct_admission_title.png`" mode="scaleToFill"/>
            </view>
            <view>{{ listdetailsData.title }}</view>
          </view>
          <!-- 地区  && 经验 && 学历 -->
          <view class="region">
            {{ city }} <text>|</text> {{ listdetailsData.experience }} <text>|</text> 学历不限
            
          </view>
          <!-- 薪资 -->
          <view class="pay">{{ listdetailsData.salary_start }}~{{ listdetailsData.salary_end }}/月</view>
          <!-- 招聘者 -->
          <view class="recruiter_box">
            <!-- 左侧信息 -->
            <view class="recruiter_left">
              <!-- 头像 -->
              <view class="recruiter_image">
                <image :src="`${baseUrl}${listdetailsData.company.avatar}`" mode="aspectFill"/>
              </view>
              <view>
                <view class="recruiter_title">{{ listdetailsData.company.title }}</view>
                <view class="recruiter_content">{{ listdetailsData.company.title }}</view>
              </view>
            </view>
            <!-- 右侧箭头 -->
            <view class="recruiter_right">
              <up-icon name="arrow-right" color="#999999" size="20"></up-icon>
            </view>
          </view>
        </view>
        <!-- 第二块 职位信息 -->
        <view class="two_box">
          <!-- <view class="two_title">岗位亮点</view>
          <view class="two_content">提供住宿、晋升空间大、免费下午茶、环境优美、升职加薪、弹性上班</view>
          <view class="two_title">职位描述</view> -->
          <view class="two_content">
            <up-parse :content=" listdetailsData.content"></up-parse>
          
            <!-- 公司简介<br> 
            1、黑龙江省中远人力资源服务有限公司，成立于2017年，<br>  
            位于黑龙江省哈尔滨市，是一家以从事商务服务业为主的企业。<br> -->
          </view>
        </view>
        <!-- 第三块 企业信息 -->
        <view class="three_box">
          <view class="three_title">企业信息</view>
          <!-- 信息盒子 -->
          <view class="three_message">
            <view class="logo">
              <image :src="`${baseUrl}${listdetailsData.company.avatar}`" mode="aspectFill"/>
            </view>
            <view class="right_message">
              <view class="message_title">黑龙江省中远人力资源服务有限公司</view>
              <!-- <view class="enterprise_message">民营企业<text>|</text>500-1000人<text>|</text>操作工</view> -->
            </view>
          </view>
          <!-- 地图 -->
          <view class="three_map">
            <!-- :enable-scroll="false" :enable-zoom="false" -->
            <map :latitude="latitude" :longitude="longitude" :markers="markers" :enable-scroll="false" :enable-zoom="false">
            </map>
          </view>
        </view>
        <!-- 下占位 -->
        <view class="placeholder"></view>
      </scroll-view>
    </view>

    <!-- 底部按钮 -->
    <view v-if="is_apply == 0">
      <view class="re_bottom">
        <view class="phone_sign" @tap="cancellation">
            <image
              :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_callnumber.png`"
              mode="scaleToFill" />
          </view>
        <view class="re_bottom_left" >
          <view  @tap.stop="onShare()" v-if="userStore.userInfo.group_id == 11 && item.department_id == userStore.userInfo.department.deparment.id ">分享招人</view>
        </view>
        <view class="re_bottom_right" @tap="rightNetWork">立即投递</view>
      </view>
    </view>
    <view v-else>
      <view class="re_other_bottom">
       
        <button class="left" @tap="cancellation"
          
        >打电话</button>
        <view class="share_btn"  @tap.stop="onShare()" v-if="userStore.userInfo.group_id == 11 && item.department_id == userStore.userInfo.department.deparment.id ">分享招人</view>
      </view>
    </view>
  </s-layout>
</template>
<script setup>
  import { baseUrl } from '@/sheep/config';
  import { onLoad,onShow } from "@dcloudio/uni-app";
  import { reactive, ref,computed } from "vue";
  import tools from '@/sheep/helper/tools.js';
  import sheep from "@/sheep";
import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';

const userStore = sheep.$store('user');
  // 获取系统信息
  const { safeAreaInsets }  = uni.getSystemInfoSync();
  const share_id = ref()
  onLoad((option) => {

    if(option.share_id){
      share_id.value = option.share_id
    }
    
    id.value = option.schedule_id
    getListDetailData()
   
  });
  const id = ref()
  const is_apply = ref()
  const listdetailsData = ref()
  const city = ref('')
  const latitude = ref()  // 经度
  const longitude = ref() // 纬度
  // 封装招聘详情接口
  const getListDetailData = async () => {
      let params = {
      ids:id.value 
      }
      const res = await sheep.$api.recruit.getListDetail(params)
      is_apply.value = res.data.is_apply
      listdetailsData.value = res.data
      city.value = res.data.city.replace(/,/g, '-');
      latitude.value = Number(res.data.lat)
      longitude.value = Number(res.data.lon)
      phone_number.value = res.data.contact
      markers.value = [{
      id:1,
      latitude:latitude.value,
      longitude:longitude.value,
      width:30,
      height:30,
      iconPath:`${baseUrl}/uploads/uniapp_image/staff/Myinterview_icon_location@2.png`,
      label:{
        content:res.data.company.address,
        fontSize:15,
        bgColor:'#fff',
        anchorY:-60,
        borderRadius:50,
        textAlign:'center',
        padding:5
      }
    }]
  }

  // 打电话
  const phone_number = ref()
  const cancellation = () => {
    tools.callPhone(phone_number.value)
  }

  // 报名
  const rightNetWork =  () => {
    uni.$u.throttle(() => {
    let data = {
      recruitment_id:id.value,
      share_id: share_id.value,
      share_source:share_id.value?2:1
    }
    sheep.$api.recruitment.postbmRecruitmentApply(data).then((res) => {
      if(res.code == 1){
        sheep.$helper.toast(res.msg)
        setTimeout(function() {
          getListDetailData()
          }, 500);
      }else{
        sheep.$helper.toast(res.msg)
      }
    
    })
  }, 500);
  }

  const markers = ref([])
  //分享招人
const share = ref({
  title: '',
  address: '',
  date: '',
  id: '',
  employeeNeeds: ''
})

// /移除HTML标签
const delTag = (str) => {
  return str.replace(/<[^>]+>/g, "");
}
const onShare=()=>{

  let htmlContent = delTag(listdetailsData.value .content)
  share.value.title = listdetailsData.value .title
  share.value.address = listdetailsData.value .address
  share.value.id =  id.value
  share.value.date = `${listdetailsData.value .start_date + '~' + listdetailsData.value .end_date}`
  share.value.employeeNeeds = htmlContent
  showShareModal();
}
// 分享同事
const shareInfo = computed(() => {
  return sheep.$platform.share.getShareInfo(
    {
      title: share.value.title,
      desc: share.value.address,
      params: {
        page: '7',
        query: share.value.id
      },
    },
    {
      type: 'details', // 商品海报
      title: share.value.title,
      desc: share.value.address,
      signUpTime: share.value.date,
      employeeNeeds: share.value.employeeNeeds,
   
    },
  );
})
</script>
    
<style scoped lang="scss">
  page {
    width: 100%;
    height: 100%;
  }

  // 版心
  .area {
    width: calc(100% - 40rpx);
    margin: 0 20rpx;
  }

  :deep(.u-form-item__body.data-v-b4fd400b) {
    padding: 20rpx 0 20rpx 30rpx;
  }

  :deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
    font-weight: $uni-font-weight;
  }

  :deep(.u-form-item__body__right__message.data-v-b4fd400b) {
    margin-left: 200rpx !important;
  }

  // 最大盒子
  .max_box {  // 330
    height: calc(100vh - 20vh);
    margin-top: 20rpx;
    // margin-bottom: 20rpx;
  }

  // 滚动容器盒子
  .scroll_box {
    height: 100%;
  }

  // 上下占位
  .placeholder {
    height: 40rpx;
  }

  // 第一块 薪资信息
  .one_box {
    height: 300rpx;
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    background-color: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
    padding: 30rpx;
    // 岗位盒子
    .one_top_box {
      display: flex;
      align-items: center;
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: 700;
      font-size: $uni-font-size-big;
      font-style: normal;
      text-decoration: none;
      text-align: left;
      margin-bottom: 20rpx;
      // 直招图片盒子
      .recruit_image {
        width: 48rpx;
        height: 32rpx;
        margin-right: 10rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    // 地区 && 经验 && 学历
    .region {
      display: flex;
      align-items: center;
      font-family: PingFangSC;
      color: #666666;
      font-weight: $uni-font-weight;
     font-size:$uni-font-size-26;
      font-style: normal;
      text-decoration: none;
      text-align: left;
      display: flex;
      margin-bottom: 20rpx;
      text {
        color: #979797;
        font-size: 20rpx;
        display: inline-block;
        margin: 0 20rpx;
        font-weight: normal;
      }
    }
    // 薪资
    .pay {
      font-family: PingFangSC;
      color: #FF6600;
      font-weight: 700;
      font-size:30rpx;
      font-style: normal;
      text-decoration: none;
      padding-bottom: 30rpx;
      border-bottom: 2rpx solid #F4F4F4;
      margin-bottom: 30rpx;
    }
    // 招聘者盒子
    .recruiter_box {
      display: flex;
      align-items: center;
      height: 64rpx;
      justify-content: space-between;
      // 左侧信息
      .recruiter_left {
        display: flex;
        align-items: center;
        // 头像
        .recruiter_image {
          width: 64rpx;
          height: 64rpx;
          margin-right: 20rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .recruiter_title {
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: 700;
         font-size:$uni-font-size-26;
          font-style: normal;
          text-decoration: none;
          text-align: left;
        } 
        .recruiter_content {
          font-family: PingFangSC;
          color: #999999;
          font-weight: 500;
          font-size: 20rpx;
          font-style: normal;
          text-decoration: none;
          text-align: left;
        }
      }
    }
  }

  // 第二块 职位信息
  .two_box {
    padding: 30rpx 30rpx 40rpx 30rpx;
    // height: 458rpx;
    border-radius: 16rpx;
    background-color: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
    // 内容标题
    // .two_title {
    //   font-family: PingFangSC;
    //   color: $uni-text-color;
    //   font-weight: $uni-font-weight;
    //   font-size: $uni-font-size-big;
    //   font-style: normal;
    //   text-decoration: none;
    //   text-align: left;
    //   margin: 30rpx 0 20rpx 0;
    //   // margin-bottom: 20rpx;
    // }
    // .two_title:first-child {
    //   margin: 0 0 20rpx 0;
    // }
    // // 内容
    // .two_content {
    //   font-family: PingFangSC;
    //   color: #999999;
    //   font-weight: 500;
    //  font-size:$uni-font-size-26;
    //   line-height: 40rpx;
    //   font-style: normal;
    //   text-decoration: none;
    //   text-align: left;
    // }
  }

  // 第三块 企业信息
  .three_box {
    padding: 30rpx 30rpx 40rpx 30rpx;
    height: 602rpx;
    border-radius: 16rpx;
    background-color: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
    margin-top: 20rpx;
    // 企业信息
    .three_title {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: $uni-font-weight;
      font-size: $uni-font-size-big;
      font-style: normal;
      text-decoration: none;
      text-align: left;
      margin: 0 0 20rpx 0;
    }
    // 信息盒子
    .three_message {
      height: 100rpx;
      display: flex;
      align-items: center;
      margin-bottom: 32rpx;
      .logo {
        width: 100rpx;
        height: 100rpx;
        border-radius: 8rpx;
        background-color: $uni-bg-color;
        margin-right: 28rpx;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }
      .right_message {
        // display: flex;
        // align-items: center;
        .message_title {
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: 500;
          font-size: 30rpx;
          line-height: 40rpx;
          font-style: normal;
          text-decoration: none;
          margin-bottom: 6rpx;
        }
        .enterprise_message {
          display: flex;
          align-items: center;
          font-family: PingFangSC;
          color: #999999;
          font-weight: 400;
          font-size: $uni-font-size-sm;
          line-height: 40rpx;
          font-style: normal;
          text-decoration: none;
          text {
            color: #979797;
            font-size: 20rpx;
            display: inline-block;
            margin: 0 20rpx;
            font-weight: normal;
          }
        }
      }

    }
    // 地图
    .three_map {
      height: 408rpx;
      overflow: hidden;
      map {
        width: 100%;
        height: 440rpx;
      }
    }
  }
// 底部按钮
.re_bottom{
  display: flex;
  justify-content: space-around;
  align-items: center;
 
    height: 144rpx;
    width: 100%;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 98;
    padding-bottom: 	env(safe-area-inset-bottom) !important;	
           // 电话标
			.phone_sign {
 
				width: 78rpx;
				height: 78rpx;
				margin-right: 10rpx;
        margin-left: 40rpx;
				image {
					width: 100%;
					height: 100%;
				}
      }
.re_bottom_left{
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
        height: 90rpx;
        z-index: 1;
        font-family: PingFangSC;
        font-weight: $uni-font-weight;
        font-size: 34rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        letter-spacing: 1rpx; /* 设置文字间距为2像素 */
        border-radius: 50rpx;
        border: 2rpx solid $uni-color-primary;
        color: $uni-color-primary;
     
}
.re_bottom_right{
        width: 30%;
        height: 90rpx;
        line-height: 90rpx;
        z-index: 1;
        font-family: PingFangSC;
        font-weight: $uni-font-weight;
        font-size: 34rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        letter-spacing: 1rpx; /* 设置文字间距为2像素 */
  
        border-radius: 50rpx;
  background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
  color: #FFFFFF;
}
}
.re_other_bottom{
  display: flex;
  justify-content: space-around;
  align-items: center;
 
    height: 144rpx;
    width: 100%;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 98;
    padding-bottom: 	env(safe-area-inset-bottom) !important;	
  .left{
    width: 40%;
        height: 90rpx;
        line-height: 90rpx;
        z-index: 1;
        font-family: PingFangSC;
        font-weight: $uni-font-weight;
        font-size: 34rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        letter-spacing: 1rpx; /* 设置文字间距为2像素 */
  
        border-radius: 50rpx;
  background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
  color: #FFFFFF;
  }
  .share_btn{
    margin: 0;
    width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
        height: 90rpx;
        z-index: 1;
        font-family: PingFangSC;
        font-weight: $uni-font-weight;
        font-size: 34rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        letter-spacing: 1rpx; /* 设置文字间距为2像素 */
        border-radius: 50rpx;
        border: 2rpx solid $uni-color-primary;
        color: $uni-color-primary;
  }
}
</style>